import {
  ClockCircleOutlined,
  MessageOutlined,
  ThunderboltOutlined,
} from "@ant-design/icons";
import { Flex, Typography } from "antd";
import { formatNumberToWan } from "../Common/commonData";
import styles from "./SSPaiCard.module.css";
import { useUser } from "@/hook/useUser/useUser";
import ProxyImage from "../Common/ProxyImage/ProxyImage";

const { Text, Title } = Typography;

export function SSPaiCard({ item = {}, style = {} }) {
  const { openInNewWindow, listDisplay } = useUser();
  const target = openInNewWindow ? "_blank" : "_self";
  const isImageEnabled = listDisplay === 0 ? true : false;

  return (
    <Flex
      style={{
        backgroundColor: "white",
        borderRadius: 8,
        boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
        padding: 16,
        transition: "all 0.3s ease",
        "&:hover": {
          boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
          transform: "translateY(-2px)",
        },
        ...style,
      }}
      gap={16}
      align="flex-start">
      {/* 左侧图片区域 */}
      {isImageEnabled && (
        <a
          href={item.url}
          target={target}
          style={{ display: "block", flexShrink: 0 }}>
          <div
            style={{
              position: "relative",
            }}>
            <ProxyImage
              originalUrl={item.extra_content?.photo_url}
              style={{
                position: "relative",
                height: "108.9px",
                width: "185.9px",
                borderRadius: 4,
                overflow: "hidden",
              }}
            />
            {item.extra_content.corner && (
              <ProxyImage
                originalUrl={item.extra_content?.corner?.icon_url}
                style={{
                  position: "absolute",
                  top: "0rem",
                  left: ".5rem",
                  width: "auto",
                  height: "1.5rem",
                }}
              />
            )}
          </div>
        </a>
      )}

      {/* 右侧内容区域 */}
      <Flex vertical flex={1} style={{ height: "100%" }}>
        {/* 标题 */}
        <a
          target={target}
          className={styles["content-link"]}
          href={item.url}
          style={{ textDecoration: "none" }}>
          <Title
            key={item.url}
            className={styles.title}
            level={5}
            style={{
              margin: 0,
              color: "#222",
            }}>
            {item.title}
          </Title>

          {/* 简介 */}
          <Typography.Paragraph
            ellipsis={{
              rows: item.title.length > 35 ? 1 : 2,
            }}
            style={{
              margin: "8px 0",
              color: "#666",
              fontSize: 14,
              minHeight: "2rem",
              maxWidth: item.extra_content?.photo_url ? "35rem" : "48m",
            }}>
            {item.extra_content.intro}
          </Typography.Paragraph>
        </a>

        {/* 底部信息栏 */}
        <Flex
          justify="space-between"
          align="center"
          style={{ marginTop: "auto" }}>
          {/* 作者信息 */}
          <Flex align="center" gap={8}>
            <a
              href={item.extra_content.authors?.[0]?.url}
              target={target}
              rel="noopener noreferrer">
              <Flex align="center" gap={6}>
                {isImageEnabled && (
                  <ProxyImage
                    originalUrl={item.extra_content.authors?.[0]?.photo_url}
                    style={{
                      width: 20,
                      height: 20,
                      borderRadius: "50%",
                    }}
                    alt={item.extra_content.authors?.[0]?.name}
                  />
                )}
                <Text style={{ fontSize: 12 }}>
                  {item.extra_content.authors?.[0]?.name}
                </Text>
              </Flex>
            </a>
            <Text type="secondary" style={{ fontSize: 12 }}>
              <ClockCircleOutlined style={{ marginRight: 4 }} />
              {item.extra_content.created_at}
            </Text>
          </Flex>

          {/* 互动数据 */}
          <Flex gap={16}>
            <Flex align="center" gap={4}>
              <ThunderboltOutlined style={{ color: "#666", fontSize: 14 }} />
              <Text type="secondary" style={{ fontSize: 12 }}>
                {formatNumberToWan(item.extra_content.likes)}
              </Text>
            </Flex>
            <Flex align="center" gap={4}>
              <MessageOutlined style={{ color: "#666", fontSize: 14 }} />
              <Text type="secondary" style={{ fontSize: 12 }}>
                {formatNumberToWan(item.extra_content.comment_count)}
              </Text>
            </Flex>
          </Flex>
        </Flex>
      </Flex>
    </Flex>
  );
}
